Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
k3llynda:
| gaspichulo:
RESET
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body { margin: 0; } #k, #g { width: 100vw; height: 45vh; font-size: 5em; display: flex; align-items: center; justify-content: center; color: white; font-family: sans-serif; } #k { background: purple; } #g { background: crimson; } .win { background: orange !important; color: black; font-weight: bold; } .scores { width: 100vw; display: flex; justify-content: center; align-items: center; text-align: center; height: 10vh; } #kScore, #gScore { font-size: 2em; font-family: sans-serif; font-weight: bold; }
console.log("Event Fired") let k = 0; let g = 0; let gScore = 0; let kScore = 0; MAX = 10; let kEl = document.getElementById("k"); let gEl = document.getElementById("g"); let kScoreEl = document.getElementById("kScore"); let gScoreEl = document.getElementById("gScore"); kEl.addEventListener("click", addK); gEl.addEventListener("click", addG); reset(); function addK() { if (!check()) return; k++; g--; impr(); checkWin("k"); } function addG() { if (!check()) return; k--; g++; impr(); checkWin("g"); } function impr() { kEl.innerHTML = k; gEl.innerHTML = g; console.log(k, g); } function check() { return k >= MAX - MAX * 2 && k < MAX && g >= MAX - MAX * 2 && g < MAX; } function checkWin(w) { if (w == "k") { if (k >= MAX) { kEl.classList.add("win"); kScore++; _reset(); } else { kEl.classList.remove("win"); } } else if (w == "g") { if (g >= MAX) { gEl.classList.add("win"); gScore++; _reset(); } else { gEl.classList.remove("win"); } } } function reset() { k = 0; g = 0; impr(); kEl.classList.remove("win"); gEl.classList.remove("win"); kScoreEl.innerHTML = kScore; gScoreEl.innerHTML = gScore; } function _reset() { setTimeout(() => reset(), 3000); } document.getElementById("btnReset").addEventListener("click", () => { kScore = 0; gScore = 0; kScoreEl.innerHTML = kScore; gScoreEl.innerHTML = gScore; });